<template>
  <div class="alert-container">
    <div class="alert-wrap">
      <img class="img-wrap" src="" alt="" />
      <div class="text-wrap">{{ title }}</div>
      <button class="text-btn" @click="handleChildConfirm">确认</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AlertTip',
  props: ['title', 'isShowAlert'],
  methods: {
    handleChildConfirm () {
      this.$emit('handleConfirm')
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../assets/common/stylus/mixins.styl'
.alert-container
  width 100%
  height 100%
  position absolute
  top 0
  right 0
  display flex
  justify-content center
  align-items center
  background-color rgba(0, 0, 0, 0.3)
  .alert-wrap
    position relative
    background-color #fff
    width 200px
    height 180px
    display flex
    flex-direction column
    .img-wrap
      width 100%
      height 100px
    .text-wrap
      color #000
      text-align center
      padding 10px 0
    .text-btn
      width 100%
      padding 10px 0
      position absolute
      bottom 0
      background-color $green
      color #fff
      font-size 18px
</style>
